<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button v-if="$AUTH('product:category:add')" type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
			<selectSystem :parentLoadingFunction="parentLoadingFunction" :parentGetData="parentGetData" :styleData="'width:15rem;border: 1px solid red;'" :placeholderData="systemTypeName"/>
		  <el-input v-model="search.categoryName" placeholder="名称" clearable></el-input>
          <el-input v-model="search.categoryCode" placeholder="编码" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding" v-loading="showloading">
      <scTable ref="table" :apiObj="apiObj" row-key="categoryId" @selection-change="selectionChange" v-on:dataChange="mydataChange" stripe>
        <el-table-column type="selection" width="50"></el-table-column>
		<el-table-column label="名称" prop="categoryName" width="170"></el-table-column>
        <el-table-column label="编码" prop="categoryCode" width="130"></el-table-column>
        <el-table-column label="产品数" prop="productCount" width="60"></el-table-column>
        <!--<el-table-column label="描述" prop="categoryDescription" width="150"></el-table-column>
		 <el-table-column label="检索Key" prop="metaKeyword" width="150"></el-table-column>
        <el-table-column label="检索描述" prop="metaDescription" width="150"></el-table-column>
		<el-table-column label="模板路径" prop="templatePath" width="150"></el-table-column>
		 <el-table-column label="栏目Path" prop="categoryPath" width="80"></el-table-column>-->
        <el-table-column label="会员等级" prop="membershipLevel" width="80"></el-table-column>
        <el-table-column label="发布区域" prop="regionPath" width="80"></el-table-column>
        <el-table-column label="图片" width="80">
			<template #default="scope">
				<el-image :src="scope.row.imageUrl" width="80"></el-image>
			</template>
		</el-table-column>
		<el-table-column label="产品" width="260">
			<template #default="scope">
				<el-link v-for="item in scope.row.products" :key="item.categoryProductId" @click="openProd(item.categoryProductId)">{{item.product.productName}}</el-link>
			</template>
		</el-table-column>
		<el-table-column label="属性" width="230">
			<template #default="scope">
				<el-link v-for="item in scope.row.attributes" :key="item.categoryAttributeId" @click="openAttr(item.categoryAttributeId)">{{item.attName}}</el-link>
			</template>
		</el-table-column>
        <el-table-column label="头部菜单" prop="pcFrontMenu" width="90">
			<template #default="scope">
				<span v-if="scope.row.pcFrontMenu==1">PC端&nbsp;&nbsp;&nbsp;</span>
				<span v-if="scope.row.phFrontMenu==1">移动端</span>
			</template>
		</el-table-column>
        <el-table-column label="降序" prop="seq" width="60"></el-table-column>
        <el-table-column label="状态" prop="status" width="60">
			<template #default="scope"><span v-if="scope.row.status==1">激活</span><span v-else>失效</span></template>
		</el-table-column>
        <el-table-column label="操作" fixed="right" align="right">
          <template #default="scope">
            <el-button v-if="$AUTH('product:category:edit')" type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button v-if="$AUTH('product:category:del')" type="text" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <categoryEdit-dialog v-if="dialog.categoryEdit" :categoryTree="tableData" ref="categoryEditDialog" @success="handleSaveSuccess" @closed="dialog.categoryEdit=false"></categoryEdit-dialog>
</template>

<script>
  import productAPI from '@/api/product/category';
  import categoryEditDialog from './categoryEdit';//1--导入
  import selectSystem from '@/components/glSelectCO/selectSystem';
  export default {
    name: 'category',
    components: {
        categoryEditDialog,selectSystem
    },
    data() {
      return {
        dialog: {
          categoryEdit: false
        },
        apiObj: productAPI.category.list,
        selection: [],
		tableData: [],
        search: {
          keyword: null,categoryName: null, categoryCode: null,
          createTime: null,systemLevelId: null,
        },
		showloading: false,
		systemTypeName: "请您选择系统！",
		sysBranchOfficeId: null,
      }
    },
    methods: {
      //添加
      add(){
        this.dialog.categoryEdit = true;
        this.$nextTick(() => {
          this.$refs.categoryEditDialog.open('add').setDataAdd(this.search.systemLevelId,this.systemTypeName,this.sysBranchOfficeId);
        });
      },
      //编辑
      table_edit(row){
        this.dialog.categoryEdit = true;
        this.$nextTick(() => {
          this.$refs.categoryEditDialog.open('edit').setData(row);
        });
      },
      //删除
      async table_del(row){
        var confirm = await this.$confirm('确定删除选中的项吗？', '提示', {
          confirmButtonText: 'ok',
          type: 'warning'
        }).catch(() => {})
        if(confirm !== 'confirm'){
          return false;
        }
        var res = await productAPI.category.delete.delete(row.categoryId);
        if(res.code === 2000){
          this.$refs.table.refresh();
          this.$message.success("删除成功");
        }else{
          this.$alert(res.message, "提示", {type: 'error'});
        }
      },
      //表格选择后回调事件
      selectionChange(selection){
		  console.log("selectionChange()");
        this.selection = selection;
      },
      //搜索
      upsearch(){
        this.$refs.table.upData(this.search);
      },
      //本地更新数据
      handleSaveSuccess(){
        this.$refs.table.refresh();
      },
      handlePermissionSuccess(){
        this.$refs.table.refresh();
      },
      handleDataSuccess(){
        this.$refs.table.refresh();
      },
	  mydataChange(res,tableData){//数据加载回调
		this.tableData = tableData;
		if(tableData && tableData.length>0){
			this.search.systemLevelId = tableData[0].systemLevelId;
			this.sysBranchOfficeId = tableData[0].sysBranchOfficeId;
			this.systemTypeName = tableData[0].systemTypeName;
		}
	  },
      formatDate(row,column) {// 获取单元格数据
        let data = row[column.property];
        if(data == null) {
          return null;
        }
        let dt = new Date(data);
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
      },
	  parentLoadingFunction(loadingBz){//选择系统---- 加载提醒
	  	this.showloading = loadingBz;
	  },
	  parentGetData(selectItem){//选择 系统回调函数
	  	this.search.systemLevelId = selectItem.systemLevelId;
		this.systemTypeName = selectItem.typeName;
	  },
    }
  }
</script>
<style>
</style>
